<template>
	<div class="main"></div>
	<button @click="add">操作</button>
</template>
<script>
import * as zrender from 'zrender'
import { gsap } from 'gsap'
export default {
	data() {
		return {

		}
	},
	methods: {
		add() {
			const obj = {
				rotation: 0
			}
			gsap.to(obj, {
				rotation: Math.PI * 2,
				duration: 2,
				onUpdate: () => {
					this.rect.attr({
						rotation: obj.rotation,
					})
					this.rect.getTextContent().rotation = obj.rotation;
				}
			})
		}
	},
	mounted() {
		let main = zrender.init(document.querySelector('.main'), {
			width: 300,
			height: 300
		})
		let rect = new zrender.Rect({
			shape: {
				width: 100,
				height: 100
			},
			x: 10,
			y: 10,
			style: {
				stroke: '#000',
				fill: 'transparent',
				text: 'helloworld',
				textFill: '#000',
				//lineWidth: 1
			},
			textContent: new zrender.Text({
				style: {
					text: '测试',
					fill: 'red'
				}
			}),
			textConfig: {
				position: "inside",
				offset: [0, 0]
			},
			originX: 50,
			originY: 50
		})
		main.add(rect);
		this.rect = rect;
	}
}
</script>
<style lang="scss">
.main {
	height: 300px;
	border: 1px solid #000;
}
</style>